<!--
 * @Author: dengyongliang
 * @Date: 2021-04-14 16:12:55
 * @LastEditTime: 2021-08-18 14:36:38
 * @LastEditors: dengyongliang
 * @Description:
-->
<template>
  <div class="si-table">
    <el-table
      ref="si-table"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      v-bind="tableAttrs"
      v-on="tableOn"
    >
      <template v-for="(item, index) in tableColumns">
        <el-table-column
          v-if="item.type === 'selection'"
          :key="index"
          width="55"
          type="selection"
        />
        <el-table-column v-else :key="index" v-bind="item">
          <template slot-scope="scope">
            <span v-if="item.render">{{ item.render(scope.row) }}</span>
            <slot
              v-else-if="item.slotName"
              :name="item.slotName"
              :scope="scope"
            />
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableColumns: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableAttrs: {
      type: Object,
      default: () => {}
    },
    tableOn: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: 'medium'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped></style>
